<template>
  <div class="home">
    <p>{{ count }}</p>
    <p>{{ double }}</p>
    <button @click="btnClick()">点击+1</button>

     <button @click="add()">相加</button>
 
      <p>初始值------>{{a}}</p>
      <p>step------>{{step}}</p>
      <p>computed相加的值------>{{v}}</p>


    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
     <button @click="change()">watchEffect改变</button>
 
      <p>值：------>{{state}}</p>
   
  </div>
</template>

<script lang="ts">
import {computed,watch,watchEffect, ref,reactive,toRefs} from "vue"

interface DataProps {
    count: number;
    double: number;
    btnClick: () => void;
}
export default {
  name:"watch",
  setup(){
    const data: DataProps = reactive({
      count:0,
      double:computed(()=>{ return data.count*2}),
      btnClick:()=>{ data.count++; }
    })
    const refData = toRefs(data)
    const a =ref(0);
    const step=10;

    const state = reactive({count: 0})
    const change = () => state.count++;
    const stop = watchEffect(() => {
      console.log(state.count, '改变')
    })

    const v= computed(() => a.value+step);

    watch(a,(newv,oldv)=>{
      console.log(`初始值newv-------->>${newv}`)
      console.log(`初始值oldv-------->>${oldv}`)
    })

    

    const add = ()=>{
      a.value++;
      //step+=10
      //console.log(`step-------->>${step}`)
    }
    //stop();//停止watchEffect监听
    return {a,add,v,step,state,change,...refData}


  }
}
</script>
